require(['./config'],()=>{
    require(['template','jquery','fly','header','footer'],(template,$,)=>{
         class Shopping{
             constructor(){
                this.getData().then(() => {
                    this.render()
                    this.zoom()
                    this.tab()
                    this.addToCart()
                    this.calcCartTotal()
                    
                })
             }
             getData(){
                const id =window.location.search.slice(1).split('&').reduce((obj,item)=>{
                    var arr = item.split('=')
                    obj[arr[0]] = arr[1]
                    return obj
                },{}).id
                this.id=Number(id)
                return new Promise(resolve=>{
                    $.get('http://rap2.taobao.org:38080/app/mock/258670/api/shopping',{id :this.id},resp=>{
                        // console.log(resp)
                    if(resp.code === 200){

                        const {shopping} = resp.body
                        this.shopping = {...shopping,id:this.id}
                        resolve()
                    }
                    
                    }) 
                })
                

             }
             render(){
                //  console.log(this.shopping)
                // console.log(this.shopping)
                $('#design').html(template('shoppingTemplate',{
                    ...this.shopping
                }))
             }
             zoom(){
                 $('#box').hover(()=>{
                     $('#box span').show()
                     $('.bigimg').show()
                 },()=>{
                    $('#box span').hide()
                    $('.bigimg').hide()
                 })
                 $('#box').on('mousemove', e => {
                    var top = e.pageY - $('#box').offset().top
                    var left = e.pageX - $('#box').offset().left
                    left -= $('#box span').outerWidth() / 2
                    top -= $('#box span').outerHeight() / 2
                    if (left < 0) left = 0
                    if (top < 0) top = 0
                    if (left >$('#box').innerWidth() - $('#box span').outerWidth())
                        left = $('#box').innerWidth() - $('#box span').outerWidth()
                    if (top >$('#box').innerHeight() - $('#box span').outerHeight())
                        top =$('#box').innerHeight() - $('#box span').outerHeight()
    
                        $('#box span').css({ left, top })
                        $('.bigimg img').css({
                        left: -2 * left,
                        top: -2 * top
                    })
                })
            
             }
             tab(){
                 $('.smallPic li').on('click','img',function(){         
                    $('.smallPic li img').removeClass('active')
                     $(this).addClass('active')
                    $('#bigPic').attr('src',$(this).attr('src'))
                    $('#colorChose span').removeClass('active')
                    $('#colorChose span').removeClass('active')
                    $('#colorChose span').eq($(this).parents('li').index()+1).addClass('active')
                    $('#bigImg').attr('src',$(this).attr('src'))
                 })
                 $('#colorChose span').on('click',function(){
                    $('#colorChose span').removeClass('active')
                    $(this).addClass('active')
                    // $('#bigPic').attr('src',$(this).index()).addClass('active')
                    $('.smallPic li img').removeClass('active')
                    $('.smallPic li img').eq($(this).index()-1).addClass('active')
                    $('#bigImg,#bigPic').attr('src',($('.smallPic li img').eq($(this).index()-1)).attr('src'))

                 })
       
             }
             addToCart () {
                $('#add-to-cart-btn').on('click', e => {
                    this.fly(e)
                    // 在真实项目里，购物车数据需要发送后端存入数据库，但是我们这个项目里存localStorage即可
                    // 先取出来，判断购物车是否为空
                    // 没有数据得到null
                    // localStorage.setItem('cart',JSON.stringify(this.shopping))
                    let cart = localStorage.getItem('cart')
                    // console.log(cart);
                    
                    // console.log(this.shopping);
                    
                   if(cart){
                    // 有数据
                    cart = JSON.parse(cart)
                    // 判断当前数据是否已存在
                    const isExist = cart.some(shop=>{
                        return shop.id === this.shopping.id
                    })
                    if(isExist){
                        // 当前 商品存在购物车
                        // 数量加1即可
                        cart = cart.map(shop=>{
                            if(shop.id === this.shopping.id){
                                shop.count++
                                // console.log(shop.count)
                            }
                            return shop
                        })
                        localStorage.setItem("cart",JSON.stringify(cart))
                    }else{
                        // 当前 商品第一次加购物车
                        // 把当前数据push进去 
                        // this.shopping.count =1
                        // cart.push(this.shopping)
                        cart.push({...this.shopping,count:1,checked:true})    
                    }

                    // cart.push(this.shopping)
                    // // 重新存一次
                    localStorage.setItem('cart',JSON.stringify(cart))
                   }else{
                    //    购物车为空
                    //    只存当前这一条  还是存数组  方便下一次的存储

                    localStorage.setItem('cart',JSON.stringify([{...this.shopping,count:1,checked:true}]))
                   }
                   
                })
            }
            fly(e){
                    const _this = this
                    // 加入购物车时的抛物线
                    $(`<img src="${this.shopping.imgs[0]}" style="width: 50px;height: 50px;border-radius:50%">`).fly({
                        start:{
                          left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                          top: e.clientY,  //开始位置（必填）
                        },
                        end:{
                          left: $('#cart').offset().left - $(window).scrollLeft(), //结束位置（必填）
                          top: $('#cart').offset().top - $(window).scrollTop() //结束位置（必填）
                        },
                        speed: 1.1, //越大越快，默认1.2
                        vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                        onEnd: function () {
                            this.destroy()
                            // 调用header里封装好的方法重新计算数量
                            _this.calcCartTotal()
                        }
                    
                       
                        
                      })
                    
            }
            calcCartTotal(){
                // 计算计算机总数量
                let count = 0
                let cart = localStorage.getItem('cart')
                if(cart){
                    cart = JSON.parse(cart)
                    count = cart.reduce((total,shop)=>{
                        return total + shop.count
                    },0)
                }
                $('#shopnum').html(count)
                $('#cart').html(count)
            }
            
         }
         new Shopping()
    })
})